<template>
  <div class="in-body" ref="footRef">
    <transition name="fade-transform" mode="out-in">
      <slot v-if="show"></slot>
    </transition>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref, onActivated, onDeactivated, onUnmounted } from 'vue';

  const time: any = ref(null);

  const footRef: any = ref(null);

  const show = ref(false);

  show.value = true;

  onMounted(() => {
    // const node = mount().$el;
    // document.body.appendChild(node);
  });
  onActivated(() => {
    show.value = true;
  });
  onDeactivated(() => {
    destroyedFn(false);
  });
  onUnmounted(() => {
    destroyedFn();
  });

  const destroyedFn = (isRemove = true) => {
    const node: any = '';

    clearTimeFn();

    if (node && node.children && node.children.length) {
      const nodeChild = node.children[0];

      if (nodeChild) {
        nodeChild.classList.add('fade-transform-leave-to');

        nodeChild.classList.add('fade-transform-leave-active');
        console.log(window.getComputedStyle(nodeChild).transitionDuration);
        const transitionDuration = window.getComputedStyle(nodeChild).transitionDuration;

        let duration: any = null;

        if (/ms$/g.test(transitionDuration)) {
          duration = parseFloat(transitionDuration);
        } else if (/s$/g.test(transitionDuration)) {
          duration = parseFloat(transitionDuration) * 1000;
        }

        time.value = setTimeout(() => {
          clearTimeFn();

          if (isRemove) {
            node.remove();
          } else {
            show.value = false;
          }
        }, duration);
      } else {
        node.remove();
      }
    }
  };
  const clearTimeFn = () => {
    if (time.value) {
      clearTimeout(time.value);

      time.value = null;
    }
  };
</script>
